import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { AntDesign } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";

const PreAuditorHome = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <View
        style={[
          styles.card,
          {
            borderTopWidth: 5,
            flex: 2,
            borderBottomWidth: 0,
            borderTopWidth: 5,
          },
        ]}
      >
        <View>
          <Text style={styles.title}>文章发布</Text>
        </View>
        <View style={styles.titleGap}></View>
        <View style={styles.containerCard}>
          <TouchableOpacity
            style={{ flex: 1 }}
            onPress={() =>
              navigation.navigate("ArticleManage", {
                type: "deleteCard",
              })
            }
          >
            <View style={styles.leftCard}>
              <View style={styles.bigIcon}>
                <AntDesign name="book" size={30} color="#fff" />
              </View>
              <Text>文章管理</Text>
            </View>
          </TouchableOpacity>
          <View style={styles.rightCard}>
            <TouchableOpacity
              style={{ flex: 1 }}
              onPress={() =>
                navigation.navigate("ArticleSelected", {
                  title: "总体要求发布",
                  type: 1,
                })
              }
            >
              <View style={styles.rightLitleCard}>
                <View
                  style={[styles.smallIcon, { backgroundColor: "#8ABAFF" }]}
                >
                  <AntDesign name="team" size={24} color="#fff" />
                </View>
                <Text>总体要求发布</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              style={{ flex: 1 }}
              onPress={() =>
                navigation.navigate("ArticleSelected", {
                  title: "组织架构发布",
                  type: 2,
                })
              }
            >
              <View style={styles.rightLitleCard}>
                <View
                  style={[styles.smallIcon, { backgroundColor: "#A9D67C" }]}
                >
                  <AntDesign name="API" size={24} color="#fff" />
                </View>
                <Text>组织架构发布</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              style={{ flex: 1 }}
              onPress={() =>
                navigation.navigate("ArticleSelected", {
                  title: "工作方案发布",
                  type: 3,
                })
              }
            >
              <View style={[styles.rightLitleCard, { borderBottomWidth: 0 }]}>
                <View
                  style={[styles.smallIcon, { backgroundColor: "#F47C68" }]}
                >
                  <AntDesign name="calendar" size={24} color="#fff" />
                </View>
                <Text>工作方案发布</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
      <View style={[styles.card, { flex: 2 }]}>
        <View>
          <Text style={styles.title}>试卷发布</Text>
        </View>
        <View style={styles.titleGap}></View>
        <View style={styles.containerCard}>
          <View style={styles.rightCard}>
            <TouchableOpacity
              style={{ flex: 1 }}
              onPress={() => navigation.navigate("TestQuesManage")}
            >
              <View style={styles.rightLitleCard}>
                <View
                  style={[styles.smallIcon, { backgroundColor: "#8ABAFF" }]}
                >
                  <Entypo name="open-book" size={24} color="#fff" />
                </View>
                <Text>试题管理</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              style={{ flex: 1 }}
              onPress={() => navigation.navigate("TestManage")}
            >
              <View style={styles.rightLitleCard}>
                <View
                  style={[styles.smallIcon, { backgroundColor: "#A9D67C" }]}
                >
                  <Entypo name="text-document" size={24} color="#fff" />
                </View>
                <Text>试卷管理</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              style={{ flex: 1 }}
              onPress={() => navigation.navigate("ScoreManage")}
            >
              <View style={[styles.rightLitleCard, { borderBottomWidth: 0 }]}>
                <View
                  style={[styles.smallIcon, { backgroundColor: "#F47C68" }]}
                >
                  <AntDesign name="barschart" size={24} color="#fff" />
                </View>
                <Text>成绩查询</Text>
              </View>
            </TouchableOpacity>
          </View>
          <TouchableOpacity
            style={{ flex: 1 }}
            onPress={() => {
              navigation.navigate("TestSelected");
            }}
          >
            <View
              style={[
                styles.leftCard,
                { borderLeftColor: "#eee", borderLeftWidth: 2 },
              ]}
            >
              <View style={styles.bigIcon}>
                <AntDesign name="filetext1" size={24} color="#fff" />
              </View>
              <Text>管理员测试发布</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
      <View
        style={[
          styles.card,
          { flex: 1, borderTopWidth: 0, borderBottomWidth: 2 },
        ]}
      >
        <View>
          <Text style={styles.title}>报告审核</Text>
        </View>
        <View style={styles.titleGap}></View>
        <View style={[styles.containerCard]}>
          <TouchableOpacity
            style={{ flex: 1 }}
            onPress={() => navigation.navigate("ResearchManage")}
          >
            <View style={[styles.rightLitleCard, { justifyContent: "center" }]}>
              <View
                style={[
                  styles.smallIcon,
                  { backgroundColor: "#5ACCDA", marginRight: 20, padding: 10 },
                ]}
              >
                <AntDesign name="form" size={28} color="#fff" />
              </View>
              <Text>调研报告审批</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
      {/* <View style={{ width: "100%", height: "15%" }}></View> */}
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    height: "100%",
    backgroundColor: "white",
    flexDirection: "column",
  },
  card: {
    justifyContent: "center",
    alignItems: "center",
    borderBottomColor: "#eee",
    borderBottomWidth: 5,
    borderTopColor: "#eee",
    borderTopWidth: 5,
    // paddingBottom: 10,
    flex: 1,
  },
  title: {
    // alignSelf: "center",
    fontSize: 18,
    padding: 3,
    marginTop: 5,
  },
  titleGap: {
    backgroundColor: "#41C3EE",
    height: 2,
    width: "8%",
  },
  containerCard: {
    flexDirection: "row",
    flex: 1,
    marginTop: 10,
    borderTopColor: "#eee",
    borderTopWidth: 1,
  },
  leftCard: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    borderRightColor: "#eee",
    borderRightWidth: 2,
  },
  rightCard: {
    flex: 1,
    flexDirection: "column",
  },
  rightLitleCard: {
    flex: 1,
    justifyContent: "space-evenly",
    alignItems: "center",
    borderBottomColor: "#eee",
    borderBottomWidth: 1,
    flexDirection: "row",
    paddingLeft: 15,
    paddingRight: 15,
  },
  bigIcon: {
    backgroundColor: "#5ACCDA",
    borderRadius: 50,
    padding: 15,
    marginBottom: 10,
  },
  smallIcon: {
    backgroundColor: "#41C3EE",
    borderRadius: 50,
    padding: 5,
  },
});

export default PreAuditorHome;
